<template>
  <div class="advIndex">
    <div class="pc">
      <div class="PCTitle">
        <self-title :userName="username + name"></self-title>
        <el-button type="button" icon="el-icon-download" @click="personAssessVisible = true">自我评分</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        class="advTable"
        stripe
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        >
        <el-table-column label="序号" prop="index" type="index" align="center"></el-table-column>
        <el-table-column label="项目名称" prop="projectName" type="projectName" align="center"></el-table-column>
        <el-table-column label="所属企业" prop="industry" type="industry" align="center"></el-table-column>
        <el-table-column label="负责角色" prop="position" type="position" align="center"></el-table-column>
        <el-table-column label="状态" prop="status" type="status" align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.status=='1'">禁用</p>
            <p v-if="scope.row.status=='0'">启用</p>
          </template>
        </el-table-column>
        <el-table-column prop="enterpriseEvaluation" label="(企业)评价" align="center">
          <template slot-scope="{row}">
            <div v-if="row.enterpriseScore !== 0">
              <el-rate disabled v-model.number="row.enterpriseScore" :colors="colors"></el-rate>
            </div>
            <div v-if="row.enterpriseScore === 0">
              <el-button type="text">暂无评分</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="comprehensiveEvaluation" label="(管理员)综合评价" align="center">
          <template slot-scope="{row}">
            <div v-if="row.adminScore !== 0">
              <el-rate disabled v-model.number="row.adminScore" :colors="colors"></el-rate>
            </div>
            <div v-if="row.adminScore === 0">
              <el-button type="text">暂无评分</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="docFilesUrlPro" label="文件项目" align="center">
          <template slot-scope="{row}">
            <div v-if="row.docFilesUrlPro !== '文件暂缺'">
              <a :href="row.docFilesUrlPro">
                <el-button type="text" icon="el-icon-download">下载</el-button>
              </a>
            </div>
            <div v-if="row.docFilesUrlPro === '文件暂缺'">
              <el-button type="text" icon="el-icon-download">暂无文件</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="docFilesUrlDem" label="需求项目" align="center">
          <template slot-scope="{row}">
            <div v-if="row.docFilesUrlDem !== '文件暂缺'">
              <a :href="row.docFilesUrlDem">
                <el-button type="text" icon="el-icon-download">下载</el-button>
              </a>
            </div>
            <div v-if="row.docFilesUrlDem === '文件暂缺'">
              <el-button type="text" icon="el-icon-download">暂无文件</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="phone">
      <div class="title">
        <div class="phoneTitle">
          <h3>项目列表</h3>
          <el-button
            class="jumpSelfAssessment"
            type="text"
            icon="el-icon-star-off"
            style="color:#fff"
            @click="jumpSelfAssessment"
          >自我评分</el-button>
        </div>
      </div>
      <div class="content">
        <div class="contentIndividual">
          <p>项目名称</p>
          <p>状态</p>
        </div>
        <div class="container">
          <div class="contentIndividual" v-for="(item,index) in tableData" :key="index">
            <p @click="jump(item)">{{item.projectName}}</p>
            <!-- <p>{{item.status}}</p> -->
            <p v-if="item.status = 0">启用</p>
            <p v-if="item.status = 1">禁用</p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="personAssessVisible" width="60%" class="personAssessStyle">
      <h2>自评</h2>
      <ul>
        <li
          v-for="(item, index) in allSkillAccess"
          :key="'person' + index"
          @click="checkDetailAccess(index)"
        >
          <span :class="{ isChecked: currentIndex === index }">
            {{
            item ? item.textName : ""
            }}
          </span>
        </li>
      </ul>
      <!-- 评分详情 -->
      <div class="accessDetailTitle">
        {{
        allSkillAccess[currentIndex]
        ? allSkillAccess[currentIndex].textName
        : ""
        }}
      </div>
      <div class="accessDetailBox">
        <span
          class="accessDetailItem"
          v-for="(item, index) in allSkillAccess[currentIndex]
              ? allSkillAccess[currentIndex].child
              : []"
          :key="index"
        >
          <span>{{ item.name }}</span>
          <el-rate v-model="item.score"></el-rate>
        </span>
      </div>

      <div class="btnBox">
        <el-button size="mini" type="primary" @click="saveAccessDetail">保 存</el-button>
        <el-button type="primary" size="mini" @click="personAssessVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import selfTitle from "../../../components/SelfTitle";
import tableItem from "../../../components/tableItem";
import { ReqProject, ReqAdviserScored } from "../../../request/index";
import abilityText from "../../../utils/abilityText.json";
export default {
  components: {
    selfTitle,
    tableItem
  },
  data() {
    return {
      personAssessVisible: false,
      // 全部技能
      allSkillAccess: [],
      // 当前选中的技能
      currentIndex: 0,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      username: "个人顾问用户 ————  ",
      name: sessionStorage.getItem("username"),
      tableData: []
    };
  },
  methods: {
    // 处理个人顾问评分
    dealPersonAssess() {
      const allSkillAccess = abilityText.text;
      this.allSkillAccess = allSkillAccess;
    },
    //选择具体的评分
    checkDetailAccess(index) {
      this.currentIndex = index;
    },
    // 保存具体的评分信息
    async saveAccessDetail() {
      const data = {
        createdId: sessionStorage.getItem("id"), //合作伙伴的id
        scoreDetails: JSON.stringify({ score: this.allSkillAccess }),
        scoredId: sessionStorage.getItem("id")
      };
      // console.log(data);
      const resultInfo = await ReqAdviserScored(data);
      const { code } = resultInfo;
      if (code === 0) {
        this.$message({
          type: "success",
          message: "评分成功"
        });
      }
      this.personAssessVisible = false;
    },
    jump(row) {
      // console.log("1", row);
      this.$router.push({
        path: "/self/adviser/advDetail",
        query: {
          info: row
        }
      });
    },
    jumpSelfAssessment() {
      this.$router.push("/self/adviser/advSelfAssessment");
    },
    //查询个人顾问下的项目
    async getTableList() {
      let data = {
        personalId: sessionStorage.getItem("id")
        // personalId: "1454737645417574402"
      };
      let List = await ReqProject(data);
      this.tableData = List.PersonalProjectVoList;
      // console.log(this.tableData);
    }
  },
  async created() {
    await this.getTableList();
    this.dealPersonAssess();
  }
};
</script>

<style scoped>
.advIndex {
  width: 90%;
  margin: 0 auto;
}
.advIndex .pc .self-title {
  padding: 0 !important;
}
.advIndex .phone {
  display: none;
}
.advIndex .PCTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* .advIndex .phoneTitle {
  display: flex;
  justify-content: space-around;
  align-items: center;
} */
.advIndex .jumpSelfAssessment {
  position: fixed;
  top: 70px;
  right: 20px;
}
@media screen and (max-width: 420px) {
  .advIndex {
    width: 100%;
    background: #ffffff;
  }
  .advIndex .pc {
    display: none;
  }
  .advIndex .phone {
    display: block;
  }
}
.advIndex .phone .title {
  width: 100%;
  background: #333;
  height: 50px;
  line-height: 50px;
}
.advIndex .phone .title h3 {
  color: #fff;
  font-size: 18px;
  text-align: center;
  font-weight: 400;
}
.advIndex .phone .content {
  width: 85%;
  margin: 0 auto;
}
.advIndex .phone .content .contentIndividual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.advIndex .phone .content .contentIndividual p {
  height: 50px;
  line-height: 50px;
}
.isChecked {
  color: #f0ab00 !important;
}
.accessDetailTitle {
  text-align: center;
  font-size: 18px;
  line-height: 40px;
}
.accessDetailBox {
  display: flex;
  flex-wrap: wrap;
}
.accessDetailItem {
  width: 50%;
  display: flex;
  line-height: 30px;
}
.accessDetailItem :nth-child(1) {
  flex: 2;
  color: #ccc;
}
.accessDetailItem :nth-child(2) {
  flex: 1;
}
.AssessStyle h2 {
  color: white;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
}
.AssessStyle ul {
  display: flex;
  flex-wrap: wrap;
}
.AssessStyle ul li {
  width: 50%;
  display: flex;
  margin-top: 20px;
}
.AssessStyle ul li > :nth-child(n) {
  flex: 1;
  font-size: 14px;
  color: white;
  text-align: center;
}
.btnBox {
  text-align: center;
  margin-top: 40px;
}
.btnBox .el-button {
  margin: 0px 30px;
  background: #1b93c4;
  padding: 10px 30px;
}

.personAssessStyle h2 {
  color: white;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
}
.personAssessStyle ul {
  display: flex;
  flex-wrap: wrap;
}
.personAssessStyle ul li {
  width: 33%;
  text-align: center;
  margin: 30px 0px 20px 0px;
}
.personAssessStyle ul li span {
  padding: 12px 20px;
  background: rgba(156, 156, 156, 0.21);
  border-radius: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}
</style>
